<template>
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>
<script>
  import E from "wangeditor";
  import config from "../../../../static/config.js";
  import {
    get,
    post,
    pat,
    del,
    common,
    getRefresh
  } from "../../../api/api";
  export default {
    name: 'editoritem',
    data() {
      return {
        editor: null,
        editorContent: '',
        uploadUrl: window.dict.url + "/goods/upFilePics",
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      },
      catchData: {
        type: Function
      }
    },
    mounted() {
      const _this = this;
      this.editor = new E(this.$refs.toolbar, this.$refs.editor); // 初始化UE
      // 编辑器的事件，每次改变会获取其html内容
      this.editor.customConfig.onchange = html => {
        this.editorContent = html;
        this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
      };
      this.editor.customConfig.customUploadImg = function (files, insert) {
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) { 
          formData.append("file", files[i]);
        }
        post(_this.uploadUrl, formData).then(resdata => {
          let self = function () {
            this.$router.push({
              path: '/home'
            });
          }.bind(this);
          let error = function () {
            alert(resdata.msg)
          }.bind(this);
          let success = function () {
            if (resdata.code == 1) {
              for(var i=0;i<resdata.data.length;i++){
                insert(resdata.data[i])
              }
            }
          }.bind(this);
          common(self)(error)(success)(resdata);
        });
      }
      this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片
      this.editor.customConfig.uploadImgServer = this.uploadUrl // 配置服务器端地址
      this.editor.customConfig.uploadImgHeaders = {
        'token': localStorage.getItem('token')
      } // 自定义 header
      this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
      this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
      this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
      this.editor.customConfig.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ];
      this.editor.customConfig.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          // 插入图片失败回调
        },
        success: (xhr, editor, result) => {
          // 图片上传成功回调
        },
        timeout: (xhr, editor) => {
          // 网络超时的回调
        },
        error: (xhr, editor) => {
          // 图片上传错误的回调
        },
        customInsert: (insertImg, result, editor) => {
          // 图片上传成功，插入图片的回调
          //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
          // console.log(result.data[0].url)
          //insertImg()为插入图片的函数
          //循环插入图片
          // console.log(result)
          // for (let i = 0; i < result.data.length; i++) {
          //   // console.log(result)
          //   let url = result.data[i].url
          //   insertImg(url)
          // }
        }
      }
      this.editor.create()
      this.editor.txt.html(this.defaultMsg)
    },
    methods: {
      getContent() { // 获取内容方法
        return this.editor.txt.text()
      },
      setContent(val) {
        this.editor.txt.html(val)
      }
    },
    destroyed() {
      // this.editor.destroy();
    }
  }

</script>
<style lang="scss">
  .w-e-toolbar {
    flex-wrap: wrap;
  }

  .text {
    border: 1px solid #ccc;
    min-height: 260px;
    width: 400px;
  }

</style>
